import { Drawer, Descriptions, Tag, Spin } from "antd";
import { useRequest } from "ahooks";
import dayjs from "dayjs";
import getSubmitRecordService from "@/api/services/submitRecordService";

interface InfoDrawerProps {
	open: boolean;
	recordId: string | null;
	onClose: () => void;
}

const getStatusColor = (status: number) => {
	switch (status) {
		case 0:
			return "processing"; // 审核中
		case 1:
			return "success"; // 审核通过
		case -1:
			return "error"; // 审核拒绝
		default:
			return "default";
	}
};

const getStatusText = (status: number) => {
	switch (status) {
		case 0:
			return "审核中";
		case 1:
			return "已通过";
		case -1:
			return "已拒绝";
		default:
			return "未知";
	}
};

const InfoDrawer: React.FC<InfoDrawerProps> = ({ open, recordId, onClose }) => {
	const { data: record, loading } = useRequest(
		async () => {
			if (!recordId) return null;
			const response = await getSubmitRecordService.getRecordInfo(recordId);
			return response;
		},
		{
			refreshDeps: [recordId],
		},
	);

	return (
		<Drawer
			open={open}
			title="交单详情"
			onClose={onClose}
			width={window.innerWidth < 768 ? "100%" : 480}
			placement="right"
			destroyOnClose
		>
			{loading ? (
				<div className="py-12 flex justify-center">
					<Spin size="large" />
				</div>
			) : record ? (
				<Descriptions column={1} bordered className="mt-4">
					<Descriptions.Item label="任务名称" className="whitespace-pre-wrap">
						{record.task.title}
					</Descriptions.Item>
					<Descriptions.Item label="任务金额">
						<span className="text-primary font-medium">
							¥{record.task.price}
						</span>
					</Descriptions.Item>
					<Descriptions.Item label="审核状态">
						<Tag color={getStatusColor(record.status)}>
							{getStatusText(record.status)}
						</Tag>
					</Descriptions.Item>
					<Descriptions.Item label="提交时间">
						{dayjs.unix(record.createtime).format("YYYY-MM-DD HH:mm:ss")}
					</Descriptions.Item>
					<Descriptions.Item label="更新时间">
						{dayjs.unix(record.updatetime).format("YYYY-MM-DD HH:mm:ss")}
					</Descriptions.Item>
					{record.remark && (
						<Descriptions.Item label="备注信息" className="whitespace-pre-wrap">
							{record.remark}
						</Descriptions.Item>
					)}
				</Descriptions>
			) : null}
		</Drawer>
	);
};

export default InfoDrawer;
